<template>
    <div :class="`detail-status-info ${mode}`">
        <div class="status-text title-color">{{statusInfo.text}}</div>
        <div class="status-tip">{{statusInfo.tip}}</div>
        <template v-if="statusInfo.isHaveCancel">
            <Button class="cancel-btn" plain size="small" @click="cancelApply">撤销申请</Button>
        </template>
    </div>
</template>

<script>
import { Button } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'DetailStatusInfo', // 售后状态详情
    mixins: [ModeMixin],
    props: {
        statusInfo: {
            type: Object,
            default: () => {},
        },
    },
    components: {
        Button,
    },
    methods: {
        cancelApply() {
            this.$emit('cancel');
        },
    },
};
</script>

<style lang="less">
.detail-status-info {
    .m-h(@shop-bag-gap);
    .mode-white();
    border-radius: @border-radius;
    .shop-boxshadow();
    .p-h(@shop-bag-gap);
    .p-v(@shop-gap-md);
    .status-text {
        font-size: @shop-font-size-mmd;
        font-weight: 500;
        color: @text-color;
        line-height: 20px;
    }
    .status-tip {
        .m-t(@shop-gap-sm);
        font-size: @shop-font-size;
        color: @tip-color;
    }
    .cancel-btn {
        width: 80px;
        color: @tip-color;
        .m-t(@gap-lg);
        border-radius: @border-radius / 2;
    }
    &.black {
        .cancel-btn {
            background-color: @black-bg-color;
            border-color: #7D7D83;
            color: #7D7D83;
        }
    }
}
</style>
